viewof selectedYear = Inputs.range(
  [min_year, max_year], 
  {
    label: "Select Year:",
    step: 1,
    value: max_year
  }
)

// Animation speed control
viewof animationSpeed = Inputs.range(
  [100, 2000], 
  {
    label: "Animation Speed (ms):",
    step: 100,
    value: 500
  }
)

// Play/Pause button
viewof isPlaying = Inputs.toggle({label: "Auto-play Animation"})

// Display statistics for selected year
yearStats = {
  const stats = yearly_stats_data;
  const currentStats = stats.find(d => d.year === selectedYear) || stats[stats.length - 1];
  
  return html`
    <div style="display: flex; gap: 15px; justify-content: space-around;">
      <div class="metric-card">
        <div style="font-size: 1.8rem; font-weight: bold;">${currentStats.countries_reporting}</div>
        <div style="font-size: 0.8rem;">Countries</div>
      </div>
      <div class="metric-card" style="background: linear-gradient(135deg, #56ab2f, #a8e6cf);">
        <div style="font-size: 1.8rem; font-weight: bold;">${currentStats.total_cases.toLocaleString()}</div>
        <div style="font-size: 0.8rem;">Total Cases</div>
      </div>
      <div class="metric-card" style="background: linear-gradient(135deg, #f093fb, #f5576c);">
        <div style="font-size: 1.8rem; font-weight: bold;">${currentStats.avg_incidence.toFixed(1)}</div>
        <div style="font-size: 0.8rem;">Avg. Incidence</div>
      </div>
      <div class="metric-card" style="background: linear-gradient(135deg, #4facfe, #00f2fe);">
        <div style="font-size: 1.8rem; font-weight: bold;">${selectedYear}</div>
        <div style="font-size: 0.8rem;">Selected Year</div>
      </div>
    </div>
  `
}

viewof selectedCountry = Inputs.select(
  countries_list, 
  {
    label: "Select Country:",
    value: "Nigeria"
  }
)

// Display selected country info
selectedCountryInfo = {
  const countryData = country_ts_dict[selectedCountry] || [];
  if (countryData.length === 0) return html`<p>No data for selected country</p>`;
  
  const latest = countryData[countryData.length - 1];
  const peak = countryData.reduce((max, current) => 
    current.measles_incidence_rate > max.measles_incidence_rate ? current : max
  );
  const total_cases = countryData.reduce((sum, d) => sum + (d.measles_total || 0), 0);
  
  return html`
    <div class="country-info">
      <h4 style="margin-top: 0; color: #2c3e50;">📍 ${selectedCountry}</h4>
      <p><strong>Region:</strong> ${latest.region}</p>
      <p><strong>Latest Rate:</strong> ${latest.measles_incidence_rate} per 1M (${latest.year})</p>
      <p><strong>Peak Rate:</strong> ${peak.measles_incidence_rate} per 1M (${peak.year})</p>
      <p><strong>Total Cases (All Years):</strong> ${total_cases.toLocaleString()}</p>
      <p><strong>Data Years:</strong> ${Math.min(...countryData.map(d => d.year))} - ${Math.max(...countryData.map(d => d.year))}</p>
    </div>
  `
}

// Time series plot for selected country
countryTimeSeries = {
  const countryData = country_ts_dict[selectedCountry] || [];
  
  if (countryData.length === 0) {
    return html`<p>No time series data available for ${selectedCountry}</p>`
  }
  
  const plot = Plot.plot({
    title: `${selectedCountry} - Measles Incidence Over Time`,
    width: 380,
    height: 300,
    marginLeft: 60,
    marginBottom: 60,
    x: {
      label: "Year",
      domain: d3.extent(countryData, d => d.year),
      tickFormat: "d"
    },
    y: {
      label: "Incidence Rate (per 1M)",
      domain: [0, d3.max(countryData, d => d.measles_incidence_rate) * 1.1]
    },
    color: {
      legend: true
    },
    marks: [
      Plot.areaY(countryData, {
        x: "year", 
        y: "measles_incidence_rate",
        fill: "#FC8D59",
        fillOpacity: 0.3
      }),
      Plot.line(countryData, {
        x: "year", 
        y: "measles_incidence_rate",
        stroke: "#E34A33",
        strokeWidth: 3
      }),
      Plot.dot(countryData, {
        x: "year", 
        y: "measles_incidence_rate",
        r: d => Math.sqrt(d.measles_total || 0) / 15 + 3,
        fill: "#B30000",
        stroke: "white",
        strokeWidth: 2,
        title: d => `${d.year}: ${d.measles_incidence_rate} per 1M\n${(d.measles_total || 0).toLocaleString()} total cases`
      }),
      Plot.ruleY([0], {stroke: "#666", strokeDasharray: "2,2"}),
      Plot.ruleX([selectedYear], {stroke: "#3498db", strokeWidth: 2, strokeDasharray: "5,5"})
    ]
  })
  
  return plot
}

// Regional comparison for selected year
regionalComparison = {
  const allRegionalData = regional_data_by_year;
  const yearData = allRegionalData.filter(d => d.year === selectedYear);
  
  const regionArray = yearData.sort((a, b) => b.avg_incidence - a.avg_incidence);
  
  const plot = Plot.plot({
    title: `Regional Comparison - ${selectedYear}`,
    width: 380,
    height: 250,
    marginLeft: 80,
    marginBottom: 60,
    x: {
      label: "Avg. Incidence Rate (per 1M)"
    },
    y: {
      label: "WHO Region"
    },
    marks: [
      Plot.barX(regionArray, {
        x: "avg_incidence",
        y: "region",
        fill: "#667eea",
        title: d => `${d.region}\nAvg. Incidence: ${d.avg_incidence.toFixed(1)} per 1M\nTotal Cases: ${d.total_cases.toLocaleString()}\nCountries: ${d.countries}`
      })
    ]
  })
  
  return plot
}